import BaseCol from 'components/BaseCol';
import BaseTable from 'components/BaseTable';
import {Text, View} from 'react-native';

export default () => {
  const columns = [
    {
      prop: 'name',
      label: '姓名',
      span: 4,
    },
    {
      prop: 'dept',
      label: '消防机构',
      span: 8,
    },
    {
      prop: 'post',
      label: '人员岗位',
      span: 6,
    },
    {
      prop: 'status',
      label: '状态',
      span: 6,
    },
  ];
  const columnsRender = (
    columns: {label: string; prop: string; span: number}[],
  ) => {
    return (
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        {columns.map(item => {
          return (
            <BaseCol span={item.span}>
              <Text style={{textAlign: 'center'}}>{item.label}</Text>
            </BaseCol>
          );
        })}
      </View>
    );
  };
  const renderItem = itemData => {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}>
        {columns.map(item => {
          return (
            <BaseCol span={item.span}>
              <Text style={{textAlign: 'center'}}>{itemData[item.prop]}</Text>
            </BaseCol>
          );
        })}
      </View>
    );
  };

  return (
    <BaseTable
      columnsRender={() => {
        return columnsRender(columns);
      }}
      renderItem={renderItem}
    />
  );
};
